<script setup>
import { ref,reactive, onMounted } from 'vue';
import  Heading  from './components/Heading.vue';
import Side from './components/Side.vue';
import Subject from './components/Subject.vue';
import axios from 'axios';
const SideCount = reactive({
  count: 0,
  pass:0,
  max: {
    name: '',
    classes: ''
  },
  min: {
    name: '',
    classes: ''
  },
  classes: [[]],
})

const SubjectCount = reactive({
  classes: [],
  count: 0,
  studentList: [],
  

})

const getData = async (Boolean) => { 
  var response = axios.get('http://api.cqhx.work:8080/api/student/queryStudentCount');
  response.then((res)=>{
    SideCount.count = res.data.count;
    
  })
  response = axios.get('http://api.cqhx.work:8080/api/student/queryStudentMax');
  response.then((res)=>{
    SideCount.max.name = res.data.name;
    SideCount.max.classes = res.data.classes;
  })
  response = axios.get('http://api.cqhx.work:8080/api/student/queryStudentMin');
  response.then((res)=>{
    SideCount.min.name = res.data.name;
    SideCount.min.classes = res.data.classes;
  })
  response = axios.get('http://api.cqhx.work:8080/api/student/queryRate');
  response.then((res)=>{
    SideCount.pass = res.data.count;
  })
  response = axios.get('http://api.cqhx.work:8080/api/student/queryClassesAll');
  response.then((res)=>{
    SubjectCount.classes = res.data;
    SideCount.classes = res.data;
  })
  response = axios.get('http://api.cqhx.work:8080/api/student/queryClassesAverage');
  response.then((res)=>{
    SideCount.classes = res.data.data;
  })
  if(Boolean == null){
    response = axios.get('http://api.cqhx.work:8080/api/student/queryStudentAll');
    response.then((res)=>{
    SubjectCount.studentList = res.data;
    // console.log(Subject.studentList);
    SubjectCount.count = res.data.length;
    })
  }
  
}


onMounted(()=>{
  getData();
})

</script>

<template>
  <div class="app-container">
    <Heading />
    <div class="main-content">
      <Side :message="SideCount" />
      <Subject :message="SubjectCount" :fetch-data="getData" />
    </div>
  </div>
  <footer>
    <p class="copyright">©2025 恒迅科技有限公司 版权所有</p>
  </footer>
</template>

<style scoped>
.app-container {
  padding-top: 60px; /* 为顶部导航栏预留空间 */
}

.main-content {
  display: flex;
  margin: 0;
  padding: 0 20px;
}

/* 固定Side组件的位置 */
:deep(.DivSide) {
  position: fixed;
  top: 60px;
  width: 200px;
  height: calc(100vh - 80px);
}

/* 固定Subject组件的位置 */
:deep(.DivSubject) {
  position: fixed;
  left: 300px; /* Side宽度 + 间距 */
  top: 191px;
  width: calc(100% - 500px);
  height: calc(100vh - 80px);
  z-index: 999;
}

/* 保持顶部导航固定 */
:deep(.heading) {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
}

footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  padding: 10px 0;
  background-color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  color: #666;
  font-family: '仿宋';
  border-top: 1px solid #eee;
}

.copyright {
  margin: 0;
}
</style>